<template>
	<div>
		<!-- 内容 -->
		<transition name="fade" mode="out-in" appear>
			<el-row>
				<el-col :span="24">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>商家评论</span>
						</div>
						<el-row>
							<el-col v-for="item in formLeftText" :key="item.text" :span="6">
								{{item.text}}: {{formLeftData[item.field]}}
							</el-col>
						</el-row>
						<div class="font_size14">
							<div class="border_ebeef5 margin_bot_top padding" v-for="item in formData2">
								<el-row>
									<div class="" style="text-align: right;">
										{{item.addtime}}
									</div>
								</el-row>
								<el-row>
									<el-col :span="6">
										用户id: {{item.user_id}}
									</el-col>
									<el-col :span="6">
										用户名: {{item.nickname}}
									</el-col>
									<el-col :span="6">
										联系电话: {{item.nickname}}
									</el-col>
									<el-col :span="6">
										星级: {{item.nickname}}
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="24">
										评论内容: 
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="24">
										商家回复
									</el-col>
								</el-row>
								<el-row v-if="item.replay">
									<el-col :span="6">
										店铺名: {{item.replay.username}}
									</el-col>
									<el-col :span="6">
										电话: {{item.replay.username}}
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="24">
										回复内容: {{item.replay.content}}
									</el-col>
								</el-row>
							</div>
						</div>

					</el-card>
				</el-col>

			</el-row>
		</transition>
	</div>
</template>

<script>
	import http from 'assets/js/http.js'

	export default {
		components: {},
		data() {
			return {
				id: '',
				formLeftData: {},
				formData2: {},
				formLeftText: [{
						text: '商家id',
						field: 'id',
					},
					{
						text: '商家名称',
						field: 'name',
					},
					{
						text: '点赞人数',
						field: 'give_like_number',
					},
					{
						text: '好评度',
						field: 'hpl',
					}
				],
				formDataText2: [],
			}
		},
		created() {
			this.id = this.$route.params.id
			const data = {
				'company_id': this.id
			}
			this.$watch('$route', {
				deep: true,
				handler: function() {
					this.id = this.$route.params.id
					this.apiPost('AdminApi/shop/shop_pl', data).then(res => {
						this.handelResponse(res, data => {
							this.formLeftData = data.shops
							this.formData2 = data.shops_comments
							console.log('this.formLeftData', this.formLeftData)
							
							console.log('this.formData2', this.formData2)
						})
					})
				}
			})
			this.apiPost('AdminApi/shop/shop_pl', data).then(res => {
				this.handelResponse(res, data => {

					this.formLeftData = data.shops
					this.formData2 = data.shops_comments
							console.log('this.formLeftData', this.formLeftData)
					
					console.log('this.formData2', this.formData2)

				})
			})

		},
		methods: {
			goService: function() {
				this.$router.push({
					name: '单商户服务列表',
					query: {
						id: this.id
					}
				})
			}
		},
		mixins: [http]
	}
</script>

<style scoped>
	table {
		border-collapse: collapse;
		/*关键代码*/
	}
	
	.border_ebeef5 {
		border: 1px solid #ebeef5;
	}
	.margin_bot_top {
		margin: 10px 0;
	}
	.padding {
		padding: 10px;
	}
	.font_size14 {
		font-size: 14px;
	}
</style>